<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>网易云音乐</title>
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="./css/header.css">
    <link rel="stylesheet" href="./css/sidebar.css">
    <link rel="stylesheet" href="./css/content.css">
    <link rel="stylesheet" href="./css/footer.css">
</head>

<body>
    <div class="container">
        <header>

            <div class="navbar">
                <h1 class="logo">
                    <a hidefocus="true" href="#">网易云音乐</a>
                </h1>
                <div class="pagecontrol">
                    <div class="back">
                        <img src="./img/left-arrow.png" alt="">
                    </div>
                    <div class="front">
                        <img src="./img/right-arrow.png" alt="">
                    </div>
                </div>
                <input type="search" name="search" id="search" placeholder="搜索">
                <div class="identifysongs">
                    <img src="./img/identify_songs.png" alt="听歌识曲">
                </div>
            </div>

            <div class="function">
                <div class="user">
                    <img src="./img/avatar.png" alt="" class="avatar" id="avatar">
                    <span>lonzzi</span>
                    <img src="./img/bottom-arrow.png" alt="">
                </div>
                <img src="./img/theme.png" alt="" class="btn">
                <img src="./img/setting.png" alt="" class="btn">
                <img src="./img/email.png" alt="" class="btn">
            </div>
        </header>
        <!-- end of header -->

        <div class="main">
            <div class="sidebar">
                <div class="musiclist">
                    <ul>
                        <li id="findmusic">发现音乐</li>
                        <li>播客</li>
                        <li>视频</li>
                        <li>关注</li>
                        <li>直播</li>
                        <li>私人FM</li>
                    </ul>
                </div>
                <p class="title">我的音乐</p>
                <div class="mymusic">
                    <ul>
                        <li><img src="./img/download.png" alt="">本地与下载</li>
                        <li><img src="./img/playhistroy.png" alt="">最近播放</li>
                        <li><img src="./img/cloud.png" alt="">我的音乐云盘</li>
                        <li><img src="./img/boardcast.png" alt="">我的播客</li>
                        <li><img src="./img/collecttion.png" alt="">我的收藏</li>
                    </ul>
                </div>
                <button class="expendlist">
                    创建的歌单
                    <img src="./img/bottom-expendarrow.png" alt="" class="expendarrow">
                </button>
                <div class="createdlist">
                    <ul>
                        <li><img src="./img/like.png" alt="">我喜欢的音乐</li>
                    </ul>
                </div>
                <button class="expendlist">
                    收藏的歌单
                    <img src="./img/bottom-expendarrow.png" alt="" class="expendarrow">
                </button>
                <div class="createdlist">
                    <ul>
                        <li><img src="./img/musiclist.png" alt="">云音乐ACG榜</li>
                        <li><img src="./img/musiclist.png" alt="">日本Oricon榜</li>
                    </ul>
                </div>
            </div>

            <div id="content">
                <div id="menu">
                    <span>个性推荐</span>
                    <span>专属定制</span>
                    <span>歌单</span>
                    <span>排行榜</span>
                    <span>歌手</span>
                    <span>最新音乐</span>
                </div>
                <div id="banner">
                    <div id="banner-img">
                        <img src="http://p1.music.126.net/vC5sIHMcy00emXVp4u-bRQ==/109951167244772185.jpg?imageView&quality=89" alt="">
                    </div>
                </div>
            </div>
        </div>
        <!-- end of main -->

        <footer>
            <div id="music">
                <img src="./img/music.png" alt="">
                <div id="musicinfo">
                    <p id="musicname">音乐</p>
                    <p id="author">歌手</p>
                </div>
            </div>
            <div id="player">
                <div id="top">
                    <a href="#" id="cycle">循环</a>
                    <a href="#" id="last">上一首</a>
                    <a href="#" id="play">播放/暂停</a>
                    <a href="#" id="next">下一首</a>
                    <a href="#" id="lyrics">歌词</a>
                </div>
                <div id="bottom">

                </div>
            </div>
            <div id="other">
                <a href="#" id="playlist"></a>
            </div>
        </footer>
        <!-- end of footer -->
        <script type="module" src="./js/index.js"></script>
    </div>
</body>

</html>